<template>
  <div class="tbPassword">
    <van-cell-group>
      <template #title>
        <van-row type="flex" justify="space-between">
          <van-col span="8">粘贴淘口令</van-col>
          <van-col span="4">
            <van-button :disabled="disabled" size="mini" color="#ff3030" @click="clean">清空</van-button>
          </van-col>
        </van-row>
      </template>
      <van-field
        class="asd"
        type="textarea"
        v-model="value"
        ref="textarea"
        placeholder="手机淘宝->打开宝贝详情页->分享->复制链接->粘贴到这里"
      />
    </van-cell-group>
    <van-button :disabled="disabled" round color="#ff3030" block @click="search">搜索优惠券</van-button>

    <van-divider>使用说明</van-divider>
    <div class="use">
      <ul>
        <li>步骤1：打开手机淘宝，浏览商品，打开某个商品详情页</li>
        <li>步骤2：分享商品，选择复制链接（或复制淘口令）</li>
        <li>步骤3：打开此页面，粘贴刚刚复制的淘口令</li>
        <li>步骤4：点击搜索优惠券</li>
        <li>不一定能搜到优惠券</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Field, CellGroup, Row, Col, Button, Divider } from "vant";
export default {
  name: "TbPassword",
  components: {
    [Field.name]: Field,
    [Row.name]: Row,
    [Col.name]: Col,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Divider.name]: Divider
  },
  data() {
    return {
      value: ""
    };
  },
  computed: {
    disabled() {
      return this.value.length <= 0;
    }
  },
  methods: {
    clean() {
      this.value = "";
    },
    search() {
      let vm = this;

      let toast = vm.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });

      this.$ajax
        .post("/commodity/v1/getItemByPassword", vm.value, {
          headers: { "Content-Type": "text/plain" }
        })
        .then(function(r) {
          if (!r.data) {
            vm.$toast("未找到优惠券，换个试试吧");
          } else {
            vm.$router.push({
              path: "/itemInfo",
              query: { token: r.data }
            });
            toast.clear();
          }
        });
    }
  }
};
</script>

<style scoped>
.tbPassword {
  padding: 20px;
  background-color: #f1f2f3;
  height: 90%;
}

.asd {
  border-radius: 10px;
  margin-bottom: 20px;
}
.asd >>> .van-field__control {
  height: 200px;
}

.van-hairline--top-bottom::after {
  border: none;
}

.van-cell-group {
  background-color: transparent;
}
.use li {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 10px;
}
</style>